<app-loading [condition]="isLoading"></app-loading>

<app-toast [message]="toast.message"></app-toast>

<div class="card mb-3" *ngIf="!isLoading">
  <h4 class="card-header">Current cats ({{cats.length}})</h4>
  <div class="card-body">
    <table class="table table-bordered">
      <thead class="thead-light">
        <tr>
          <th scope="col">Name</th>
          <th scope="col">Age</th>
          <th scope="col">Weight</th>
          <th scope="col">Actions</th>
        </tr>
      </thead>
      <tbody *ngIf="cats.length === 0">
        <tr>
          <td colspan="4">There are no cats in the DB. Add a new cat below.</td>
        </tr>  
      </tbody>
      <tbody *ngIf="!isEditing">
        <tr *ngFor="let cat of cats">
          <td>{{cat.name}}</td>
          <td>{{cat.age}}</td>
          <td>{{cat.weight}}</td>
          <td>
            <button class="btn btn-sm btn-primary" (click)="enableEditing(cat)">
              <i class="fa fa-pencil"></i> Edit
            </button> 
            <button class="btn btn-sm btn-danger ml-1" (click)="deleteCat(cat)">
              <i class="fa fa-trash"></i> Delete
            </button>
          </td>
        </tr>  
      </tbody>
      <tbody *ngIf="isEditing">
        <tr>
          <td colspan="4">
            <form class="form-inline" #form="ngForm" (ngSubmit)="editCat(cat)">
              <input class="form-control mr-2" type="text" name="name"
                     [(ngModel)]="cat.name" placeholder="Name" required>
              <input class="form-control mr-2" type="number" name="age"
                     [(ngModel)]="cat.age" placeholder="Age" min="0" required>
              <input class="form-control mr-2" type="number" name="weight"
                     [(ngModel)]="cat.weight" placeholder="Weight" step="any" min="0" required>
              <button class="btn btn-sm btn-primary mr-2" type="submit" [disabled]="!form.form.valid">
                <i class="fa fa-floppy-o"></i> Save
              </button>
              <button class="btn btn-sm btn-warning" (click)="cancelEditing()">
                <i class="fa fa-times"></i> Cancel
              </button>
            </form>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<app-add-cat-form *ngIf="!isEditing" [cats]="cats"></app-add-cat-form>
